<template>
  <div>
    <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
      <div v-if="!isLoad" style="min-height: 90vh">
        <div v-if="todoList.length > 0" class="wrap">
          <div
            v-for="item in todoList"
            :key="item.id"
            class="line"
            @click="click(item)"
          >
            <div class="overflow-h font14 color-2 pt12">
              {{ item.orderNum }}
            </div>
            <div class="mt5">
              <div
                class="display-ib font12 color-8 overflow-h"
                style="width: calc(100% - 150px)"
              >
                {{ item.sendBy }}
              </div>
              <div
                class="display-ib font12 color-8 fr text-r overflow-h"
                style="width: 130px"
              >
                {{ item.sendDate }}
              </div>
            </div>
          </div>
        </div>
        <div v-else-if="show=='1'" class="text-c">
          <img
            :src="require('@/assets/images/none.png')"
            alt="请求错误"
            style="margin: 100px 0 0"
          />
          <div class="color-b font14" style="margin: 20px 0 0 15px">
            请求错误！
          </div>
        </div>
        <div v-else class="text-c">
          <img
            :src="require('@/assets/images/none.png')"
            alt="暂无数据"
            style="margin: 100px 0 0"
          />
          <div class="color-b font14" style="margin: 20px 0 0 15px">
            暂无数据！
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import { getMytodo } from "@/api/newtodo";
import { mapGetters } from "vuex";
import { Toast } from "vant";
import { Notify } from "vant";
export default {
  name: "newtodo",
  data() {
    return {
      todoList: [], // 待办列表
      listQuery: { source: "SMS", page: 1, rows: 20 },
      show: "",
      totalPages: "",
      isLoad: true,
      isAchiveBottom: false, //滚动条是否到底部标志
      refreshLoading: false,
    };
  },
  computed: {
    ...mapGetters(["user"]),
  },
  activated() {
    this.getList();
  },
  created() {
    window.addEventListener("scroll", this.onScroll);
  },
  mounted() {
    window.setResult = this.setResult;
  },
  destroyed() {
    window.removeEventListener("scroll", this.onScroll);
  },
  methods: {
    onRefresh() {
      this.getList();
    },
    //滚动触底加载
    onScroll() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop = document.documentElement.scrollTop;
      //变量windowHeight是可视区的高度
      let outerHeight = document.documentElement.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight;
      //滚动条到底部的条件(距底部20px时触发加载)
      // if (
      //   scrollHeight - 20 <= outerHeight + scrollTop &&
      //   !this.isAchiveBottom
      // ) {
      //   if (this.totalPages > this.listQuery.page) {
      //     this.show = "true";
      //     this.listQuery.page += 1;
      //     this.getList();
      //     this.isAchiveBottom = false;
      //   } else {
      //     this.show = "false";
      //   }
      // }
    },
    getList() {
      this.show='0';
      if (!this.refreshLoading) {
        Toast.loading({
          message: "加载中...",
          forbidClick: true,
        });
      }

      getMytodo(Object.assign(this.listQuery, { userName: this.user.userName }))
        .then((result) => {
          Toast.clear();
          this.refreshLoading = false;
          if(!result.data){
             this.isLoad = false;
              Notify(result.message);
               this.show = "1";
              return;
          }


          let datal = this.todoList;
          if (this.listQuery.page == 1) {
            datal = [];
            if (result.data.lists) {
              if (result.data.lists.act) {
                datal.push(result.data.lists.act);
              } else {
                datal = result.data.lists;
              }
            }
          } else {
            if (result.data.lists) {
              if (result.data.lists.act) {
                datal = datal.push(result.data.lists.act);
              } else {
                datal = datal.concat(result.data.lists);
              }
            }
          }
          this.todoList = datal;
          // this.totalPages = result.data.total;
          this.isLoad = false;
        })
        .catch((e) => {
          Notify({ type: 'danger', message: e.message });
          Toast.clear();
          this.isLoad = false;
          this.show = "1";
        });
    },
    click(item) {
      this.$router.push({
        name: "newDetail",
        params: {
          actId: item.actId,
          title: item.orderNum,
          procedure: item.procedure,
        },
      });
    },
  },
};
</script>
<style scoped>
.wrap {
  width: 100%;
  padding-left: 16px;
}
.line {
  width: 100%;
  height: 64px;
  padding-right: 16px;
  border-bottom: 1px solid #eeeeee;
}
.pt12 {
  padding-top: 12px;
}
.mt5 {
  margin-top: 5px;
}
</style>